<template>
  <div class="province-map-container">
    <div class="content-wrapper">
      <div ref="mapContainer" class="map"></div>
      <div ref="rankingContainer" class="ranking">
        <h3>景点排行榜</h3>
        <ul>
          <li v-for="(spot, index) in filteredSpots" :key="spot.id" class="ranking-item">
            <div class="card" :style="{ backgroundImage: 'url(' + spot.image + ')', transform: cardTransform }">
              <div class="overlay">
                <div class="top-badge-container">
                  <span v-if="index === 0" class="badge gold">🥇</span>
                  <span v-if="index === 1" class="badge silver">🥈</span>
                  <span v-if="index === 2" class="badge bronze">🥉</span>
                  <div class="top-text">{{ `Top ${index + 1}` }}</div>
                </div>
                <div class="spot-name">{{ spot.name }}</div>
                <div class="spot-tags">{{ spot.tags.join(', ') }}</div>
                <div class="spot-info">热度: {{ spot.hotness }} | ¥{{ spot.cost }}</div>
                <div class="spot-season">推荐季节: {{ spot.season }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted,defineExpose } from "vue";
import * as echarts from "echarts";
import { getProvinceMapData } from '../../api/map.js';

export default {
  name: "ProvinceMap",
  props:{
    filteredSpots:Array,
    selectedProvince:{
      type: Object,
      default: () => ({
      name: "中国",
      introduction: "best"
     
    })
    }
  },
  setup(props) {

    const mapContainer = ref(null);
    
    // 地图初始化与更新函数，保留原有功能并加入新功能
    const updateProvince = (province) => {
      const chart = echarts.init(mapContainer.value);
      chart.showLoading();
      getProvinceMapData(province)
        .then(res => {
          chart.hideLoading();
          echarts.registerMap("GX", res);
          
          // 制作景点 scatter 数据（使用头像图片，按热度调整大小，前三名加奖牌边框）
          const seriesData = props.filteredSpots.map((spot, index) => ({
            name: spot.name,
            value: [...spot.coords, spot.hotness],
            symbol: `image://${spot.image}`,
            symbolSize: Math.max(30, spot.hotness / 3),
            label: {
              show: true,
              formatter: `{b}`,
              position: "right",
              fontSize: 12
            },
            itemStyle: {
              // 分别给前三名设置金、银、铜边框，其余用白色边框
              borderColor: index === 0 ? "gold" : index === 1 ? "silver" : index === 2 ? "peru" : "#fff",
              borderWidth: 3,
            }
          }));
          
          // 添加牵引线数据，让头像不至于直接重叠在地图上
          const linesData = props.filteredSpots.map((spot) => {
            const [lon, lat] = spot.coords;
            // 计算一个偏移坐标（此处仅做简单示例，实际可根据地图比例调整）  
            const offsetX = 20, offsetY = -20;
            return {
              coords: [[lon, lat], [lon + offsetX * 0.01, lat + offsetY * 0.01]],
              lineStyle: {
                color: '#888',
                width: 1,
                type: 'dashed'
              }
            };
          });
          
          const option = {
            geo: {
              map: "GX",
              roam: true,
              zoom: 2.5,
              label: { show: true, color: "#333", fontSize: 14 },
              itemStyle: { areaColor: "#cfe2f3", borderColor: "#1f487e", borderWidth: 1.5 },
              emphasis: { itemStyle: { areaColor: "#76b5c5" } }
            },
            series: [
              {
                type: "scatter",
                coordinateSystem: "geo",
                data: seriesData,
              },
              {
                type: 'lines',
                coordinateSystem: 'geo',
                z: 2,
                effect: {
                  show: true,
                  period: 6,
                  trailLength: 0.1,
                  symbol: 'arrow',
                  symbolSize: 5
                },
                lineStyle: {
                  normal: {
                    color: '#aaa',
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2
                  }
                },
                data: linesData
              }
            ]
          };
          chart.setOption(option);
        })
        .catch(error => {
          console.error(`加载${province}地图失败:`, error);
        });
    };
    
    onMounted(() => {
      updateProvince(props.selectedProvince.name);
    });
    defineExpose({ updateProvince});
    return {  mapContainer,updateProvince};
  },
};
</script>

<style scoped>
  .province-map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f4f4f4;
    padding: 20px;
  }
  .content-wrapper {
    display: flex;
    justify-content: space-between;
    width: 90vw;
    margin-top: 20px;
  }
  .map,
  .ranking {
    height: 75vh;
  }
  .map {
    width: 70%;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }
  .ranking {
    width: 25%;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  .ranking ul {
    list-style: none;
    padding: 0;
  }
  /* 调整卡片高度 */
  .ranking-item {
    margin-bottom: 20px;
    position: relative;
    height: 190px; /* 调小高度，避免出框 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  .card {
    position: relative;
    width: 100%;
    height: 100%;
    color: white;
    background-size: cover;
    background-position: center;
  }
  /* 新增的奖牌容器，带半透明背景和圆角 */
  .top-badge-container {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
    border-radius: 5px;  /* 圆角 */
    padding: 2px 5px; /* 内边距 */
    z-index: 2;
    font-size: 16px;
    color: white;
    font-weight: bold;
  }
  .top-text {
    margin-left: 8px; /* 奖牌和文字之间的间距 */
  }
  /* 奖牌的样式 */
  .badge {
    font-size: 20px; /* 调整奖牌大小 */
  }
  /* 金奖 */
  .gold {
    color: gold;
  }
  /* 银奖 */
  .silver {
    color: silver;
  }
  /* 铜奖 */
  .bronze {
    color: peru;
  }
  .spot-name {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .spot-tags {
    position: absolute;
    bottom: 10px;
    left: 20px;
    font-size: 12px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .spot-info {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 12px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .spot-season {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 12px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
</style>
